import React, { useState, useEffect } from 'react';
import './index.scss'; // 根据需要引入样式文件

import image1 from "../../assets/images/image1.jpg";
import image2 from "../../assets/images/image2.webp";
import image3 from "../../assets/images/image3.webp";
import image4 from "../../assets/images/image4.webp";
import image5 from "../../assets/images/image5.jpg";
import image6 from "../../assets/images/image6.webp";

function ImageCarousel() {
    const images = [image1, image2, image3, image4, image5, image6];
    const [currentImageIndex, setCurrentImageIndex] = useState(0);

    useEffect(() => {
        const timer = setInterval(() => {
            setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
        }, 3000);
        return () => clearInterval(timer);
    }, [images.length]); // 加入依赖项确保images数组变化时重新设置定时器

    return (
        <div className="slides">
            <img src={images[currentImageIndex]} alt="Carousel Image" />
        </div>
    );
}

export default ImageCarousel;
